<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
        div{
            position: absolute;
            background-color: darkgray;
            top: 100px;
            width:500px;
        }
        @-webkit-keyframes mycolor{
            0%{
                background-color: rgb(119, 255, 7);
                transform: rotate(0deg);
            }
            30%{
                background-color: rgb(252, 2, 77);
                transform: rotate(30deg);
            }
            60%{
                background-color: rgb(64, 5, 202);
                transform: rotate(-30deg);
            }
            100%{
                background-color: rgb(184, 247, 11);
                transform: rotate(0deg);
            }
        }
        div:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        </style>

    </head>
    <body>
        <div>实例</div>

    </body>
</html>